<template>
    <div class="process-wrapper">
        <div class="process-wrapper__process">
            <div class="process-wrapper__process-bar" :style="styleObj">
                <div class="process-wrapper__process-bar-point"></div>
            </div>
        </div>
        <div class="process-wrapper__text">{{process}}%</div>
    </div>
</template>

<script>
    // process
    module.exports = {
        data: function() {
            return {
                styleObj: {
                    width: 0,
                    transitionDuration: 0
                }
            }
        },
        props: {
            process: {
                type: Number || String,
                default: 0
            }
        },
        methods: {
            init: function () {
                var that = this;
                setTimeout(function () {
                    that.styleObj.width = that.process + '%';
                    that.styleObj.transitionDuration = that.process / 100 + 's';
                },50);
            },
        },
        created: function () {
            this.init();
        }
    }
</script>